<template>
  <view class="complaint-page">
    <!-- 导航栏 -->
    <u-navbar 
      title="投诉与建议" 
      leftIcon="arrow-left" 
      @leftClick="$u.route({  type: 'back' })"
    ></u-navbar>
 
    <!-- 表单区域 -->
    <view class="form-area">
      <!-- 一期简单表单 -->
      <template v-if="!isPhaseTwo">
        <u--textarea 
          v-model="content" 
          placeholder="请描述您的问题或建议（不少于10个字）" 
          height="300"
          maxlength="500"
          count 
        ></u--textarea>
        
        <!-- 图片上传 -->
        <view class="upload-title">上传凭证（选填）</view>
        <u-upload 
          :fileList="fileList"
          @afterRead="handleUpload"
          @delete="handleDelete"
          multiple 
          maxCount="3"
        ></u-upload>
      </template>
 
      <!-- 二期分类表单 -->
      <template v-else>
        <u-radio-group v-model="complaintType">
          <u-radio 
            v-for="item in typeOptions" 
            :key="item.value"  
            :name="item.value"  
            :label="item.label" 
            class="type-radio"
          ></u-radio>
        </u-radio-group>
 
        <!-- 投诉用户 -->
        <template v-if="complaintType === 'user'">
          <u-input 
            v-model="targetUser" 
            placeholder="请输入被投诉用户ID/昵称" 
            border="bottom"
            clearable 
          />
        </template>
 
        <u--textarea 
          v-model="content" 
          :placeholder="getPlaceholder()" 
          height="250"
          maxlength="500"
          count 
        ></u--textarea>
      </template>
 
      <!-- 提交按钮 -->
      <u-button 
        type="primary" 
        text="提交" 
        @click="handleSubmit" 
        :loading="submitting"
        class="submit-btn"
      ></u-button>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isPhaseTwo: false, // 二期功能开关 
      complaintType: 'platform', // 投诉类型 
      targetUser: '',    // 被投诉用户 
      content: '',       // 内容 
      fileList: [],      // 上传文件 
      submitting: false,
      typeOptions: [
        { value: 'user', label: '投诉用户' },
        { value: 'platform', label: '平台建议' },
        { value: 'bug', label: '功能异常' }
      ]
    };
  },
  methods: {
    // 获取动态placeholder 
    getPlaceholder() {
      const map = {
        user: '请详细描述问题（发生时间、具体行为等）',
        platform: '您的建议将帮助我们做得更好',
        bug: '请描述异常现象和操作步骤'
      };
      return map[this.complaintType] || '请输入内容';
    },
    // 文件上传 
    async handleUpload(event) {
      const files = event.file; 
      const uploadTasks = files.map(file  => {
        return new Promise(resolve => {
          // 模拟上传 
          setTimeout(() => {
            resolve({
              url: file.url, 
              status: 'success'
            });
          }, 1000);
        });
      });
      
      this.fileList  = [...this.fileList,  ...(await Promise.all(uploadTasks))]; 
    },
    // 文件删除 
    handleDelete(index) {
      this.fileList.splice(index,  1);
    },
    // 提交处理 
    async handleSubmit() {
      if (!this.content.trim())  {
        return this.$u.toast(' 请输入内容');
      }
      
      if (this.complaintType  === 'user' && !this.targetUser)  {
        return this.$u.toast(' 请输入被投诉用户信息');
      }
 
      this.submitting  = true;
      try {
        const params = {
          type: this.complaintType, 
          content: this.content, 
          images: this.fileList.map(item  => item.url), 
          targetUser: this.targetUser  
        };
        
        await this.$u.api.submitComplaint(params); 
        this.$u.toast(' 提交成功');
        
        setTimeout(() => {
          uni.navigateBack(); 
        }, 1500);
      } finally {
        this.submitting  = false;
      }
    }
  }
};
</script>
 
<style lang="scss" scoped>
.complaint-page {
  .form-area {
    padding: 30rpx;
  }
  
  .upload-title {
    margin: 30rpx 0 15rpx;
    font-size: 26rpx;
    color: $u-tips-color;
  }
  
  .type-radio {
    margin: 20rpx 0;
  }
  
  .submit-btn {
    margin-top: 50rpx;
  }
}
</style>